<template>
  <div class="form-submit">
    <van-form @submit="onSubmit" class="submit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        right-icon="https://b.yzcdn.cn/vant/icon-demo-1126.png"
        show-error-message="账户不正确/账号已存在"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="userpwd"
        :type="type"
        name="密码"
        label="密码"
        placeholder="密码"
        show-error-message="密码不正确"
        :right-icon="typeicon"
        @click="xianshi(typeicon)"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="yanzheng">
        <span @click="toreg">新用户注册</span>
        <span >忘记密码</span>
    </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
      
    </van-form>

    
  </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
      username: "",
      userpwd: "",
      type: "password",
      typeicon: "closed-eye",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
        if(this.username in localStorage){
            let pwd = localStorage[this.username]
            if(pwd == this.userpwd){
                Vue.prototype.$toast('登录成功');
                localStorage.setItem("token","吴毅小次郎");
                this.$router.push('/myhome');
            }else{
                Vue.prototype.$toast('密码错误，请重新输入');
            }
        }else{
            Vue.prototype.$toast("用户不存在");
        }
    },
    xianshi(val) {
      if (val == "closed-eye") {
        this.type = "text";
        this.typeicon = "eye-o";
      } else {
        this.type = "password";
        this.typeicon = "closed-eye";
      }
    },
    toreg(){
        this.$router.push('/reg');
    },
  },
};
</script>

<style scoped>
.form-submit {
  margin-top: 0.925rem;
  display: flex;
  flex-direction: column;
}
.submit {
  position: relative;
}
.img {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 3.35rem;
  right: 1.6rem;
}
.img img {
  width: 100%;
}
 .yanzheng{
margin: 1rem;
display: flex;
justify-content: space-between;
font-size: .8rem;
color: rgb(19, 93, 253);
font-weight: 700;
}
</style>